<template>
    <div class="exam-container">
      <el-skeleton :loading="isFirst" :rows="15" animated>
        <div class="head-content-search">
         <div style="display: flex">
          <div class="exam-top-addbtn">
            <el-button size="small" type="primary" @click="addArrange">安排</el-button>
          </div>

          <!-- 搜索框 -->
          <div class="mySearch" style="flex: 1">
            <el-input
              :width="150"
              v-model="key"
              placeholder="请输入你要查询的名称"
              class="input-with-select"
            >
              <template #append>
                <el-button :icon="Search" />
              </template>
            </el-input>
          </div>

          <div class="myTips">
            <!-- <el-checkbox-group v-model="chosen" @change="checkStatus"> -->
              <el-checkbox   v-model="check_one"  @change="checkStatus_one">未开始</el-checkbox>
              <el-checkbox   v-model="check_two"  @change="checkStatus_two">已结束</el-checkbox>
              <el-checkbox   v-model="check_three"  @change="checkStatus_three">考试中</el-checkbox>
              <!-- <el-checkbox label="IsPublish4">未发布</el-checkbox> -->
            <!-- </el-checkbox-group> -->
          </div>
        </div>
      </div>


      <div style="margin-top: 10px">
        <el-table :data="data" v-loading="isLoad" :border="true">
          <el-table-column label="序号" type="index" width="60px"></el-table-column>
          <el-table-column
            label="名称"
            prop="name"
            :show-overflow-tooltip="true"
            class="last_commoner"
          >
          </el-table-column>
          <el-table-column label="类型" prop="type" width="100" :show-overflow-tooltip="true">
           <template #default="scope">
              <el-tag type="primary" size="small">
                {{ scope.row.type == 1 ? '普通试卷' : '高难度试卷' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="组织" prop="orgnames" width="100" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column
            label="已考试"
            prop="completeCount"
            :show-overflow-tooltip="true"
            width="100"
          >
          <template #default="scope">
              <el-tag type="primary" size="small">
                {{ scope.row.completeCount }}人
              </el-tag>
            </template>
        </el-table-column>

          <el-table-column
            label="开始时间"
            prop="beginTime"
            :show-overflow-tooltip="true"
          ></el-table-column>

       <el-table-column
            label="结束时间"
            prop="endTime"
            :show-overflow-tooltip="true"
          ></el-table-column>
          

          <el-table-column
             width="80"
            label="安排人"
            prop="author"
            :show-overflow-tooltip="true"
          ></el-table-column>

          <el-table-column label="状态" prop="isBan" width="80">
            <template #default="scope">
              <!-- 1.禁用 0.没禁用 -->
              <el-tag type="success" size="small" v-if="scope.row.state == 1">未开始</el-tag>
              <el-tag type="warning" size="small" v-if="scope.row.state == 2">考试中</el-tag>
              <el-tag type="danger" size="small" v-if="scope.row.state == 3">已结束</el-tag>
              <!-- <el-tag type="success" size="small" v-else>否</el-tag> -->
            </template>
          </el-table-column>

          <el-table-column label="阅卷" prop="isCheck" width="80">
            <template #default="scope">
              <!-- 1.已经阅读danger 0.没有阅读success -->
              <el-tag
                type="success"
                size="small"
                v-if="scope.row.isCheck == 0 || scope.row.isCheck == null ||scope.row.isFinish==1 && scope.row.isCheck==1|| scope.row.isFinish==0 && scope.row.isCheck==0 "
                >已阅卷</el-tag
              >
              <el-tag type="danger" size="small" v-if="scope.row.isCheck == 1 && scope.row.isFinish==0">待阅卷</el-tag>
            </template>
          </el-table-column>


          <el-table-column label="操作" fixed="right" width="200">
            <template #default="scope">
                             <!-- 删除 -->
              <el-popconfirm
                title="确认删除吗?"
                confirm-button-text="确认"
                cancel-button-text="取消"
                @confirm="deleteArrange(scope.row)"
              >
                <template #reference>
                  <el-button
                    type="danger"
                    size="small"
                    plain
                    v-if="scope.row.state == 1 || scope.row.state == 2"
                    :loading="btnLoad"
                    >删除</el-button
                  >
                </template>
              </el-popconfirm>


              <el-button
                type="success"
                plain
                size="small"
                :loading="btnLoad"
                @click="goReview(scope.row)"
                v-if="scope.row.isCheck==1 &&scope.row.state==3"
                >去阅卷</el-button
              >
              <el-button
                type="primary"
                size="small"
                :loading="btnLoad"
                @click="arrangeDetail(scope.row)"
                v-if="scope.row.isCheck==1 &&scope.row.isFinish==1 
                ||scope.row.isCheck==0 &&scope.row.isFinish==0 
                || scope.row.state==1 || scope.row.state==2 ||scope.row.isFinish===1"
                >详情</el-button
              >

            


            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div
          style="
            margin-top: 10px;
            padding-bottom: 10px;
            display: flex;
            justify-content: space-between;
            border: 1px solid #eee;
          "
        >
          <el-pagination
            background
            @size-change="changLimit"
            layout="sizes,prev, pager, next,total"
            :total="total"
            small
            style="margin: 10px 0 0 10px"
            v-model:current-page="page"
            :page-sizes="[10, 20, 30, 40, 50]"
          />
        </div>
      </div>

    </el-skeleton>

    </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, watchEffect } from 'vue'
import { Search } from '@element-plus/icons-vue'
import {getArranges,deleteArranges} from '../../../api/arrange'
import type {arrange_IndexDto} from '../../../dto/exam/arrange/indexDto'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

export default defineComponent({
    setup() {
        const router = useRouter();
        const data=reactive<arrange_IndexDto>({
            check_one:false,
            check_two:false,
            check_three:false,
            data:[],
            weikaishi:-1,
            yijieshu:-1,
            kaoshizhong:-1,
            page:1,
            limit:10,
            key:"",
            total:0,
            isLoad:true,
            isFirst:true

        })

   

        const events={
          /**
           * 
           * @param val 详情点击事件
           */
          arrangeDetail:(val:any)=>{
            router.push(`arrange/review/${val.id}`);
          },

          /**
           * 
           * @param val 去阅卷
           */
          goReview:(val:any)=>{
              router.push(`arrange/review/${val.id}`);
          },
          /**
           * 
           * @param val 删除安排的考试
           */
          deleteArrange:(val:any)=>{
            data.isLoad=true;
            deleteArranges({ids:[val.id]}).then((res:any)=>{
              data.isLoad=false;
              if(res.result===0){
                   ElMessage.success(res.message);
                   events.getArranges();
              }else{
                   ElMessage.success(res.message);
              }
            })
          },
          
            /**
             * 安排考试按钮点击事件
             */
            addArrange:()=>{
                router.push("arrange/add");
            },
            /**
             * 获取试题列表
             */
            getArranges:()=>{
               data.isLoad=true;
                getArranges({
                    page:data.page,
                    limit:data.limit,
                    key:data.key,
                    weikaishi:data.weikaishi,
                    yijieshu:data.yijieshu,
                    kaoshizhong:data.kaoshizhong
                }).then((res:any)=>{
                      if(res.result===0){
                        console.log(res.data.data);
                         data.data=res.data.data;
                         data.total=res.data.total;
                  
                         data.isLoad=false;
                         data.isFirst=false;
                      }
                        
                })
               
           },
            /**
             * 改变每页的数据数量
             */
            changLimit: (val: any) => {
                data.limit = val;
            },
            /**
            * 未开始复选框改变事件
            */
           checkStatus_one:()=>{
            data.isLoad=true;
            if(data.check_one){
                 data.weikaishi=1;
                 events.getArranges();
            }else{
                data.weikaishi=-1;
                events.getArranges();
            }
               
           },
           /**
            * 已结束复选框改变事件
            */
           checkStatus_two:()=>{
            data.isLoad=true;
            if(data.check_two){
                data.yijieshu=1;
                events.getArranges();
            }else{
                data.yijieshu=-1;
                events.getArranges();
            }
               
           },
           /**
            * 考试中复选框改变事件
            */
           checkStatus_three:()=>{
              data.isLoad=true;
            if(data.check_three){
                data.kaoshizhong=1;
                events.getArranges();
            }else{
                data.kaoshizhong=-1;
                events.getArranges();
            }
               
           }
        }
        watchEffect(()=>{
            events.getArranges();
        })

        return{
            ...toRefs(data),
            ...events,Search
        }
    },
})
</script>
